<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-table :data="menu" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="name" label="名称"  width="180">
                </el-table-column>
                <el-table-column prop="code" label="权限值"  width="180">
                </el-table-column>
                <el-table-column prop="address" label="跳转权限值">
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template v-slot="{row,$index}">
                        <el-button type="primary" size="mini" :disabled="!row.children.length"  icon="el-icon-plus" @click=""></el-button>
                        <el-button type="warning" :disabled="row.level==1" icon="el-icon-edit-outline" size="mini" @click=""></el-button>
                        <el-button type="danger" :disabled="row.level==1"  icon="el-icon-delete"  size="mini" @click=""></el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: []
        }
    },
    methods: {
        async getPermission() {
            let result = await this.$API.permission.getMenuRes();
            this.menu = result.data.children;
        }
    },
    mounted() {
        this.getPermission()
    },
}
</script>

<style lang="scss" scoped>

</style>